Optimizarea automată a graficii în WebP și AVIF prin Nginx pe Ubuntu 24.04
Vă salut, prieteni!
Puteți închiria un server cu procesoare incredibil de rapide AMD Ryzen și puteți configura un timp de răspuns instantaneu pentru baza de date MySQL, dar dacă la încărcarea paginii principale a site-ului browserul utilizatorului începe să descarce imagini JPEG sau PNG necomprimate de câte 5–10 Megabiți fiecare — proiectul se va mișca teribil de lent.
În anul 2026, viteza de încărcare (metricile Google Core Web Vitals, cum ar fi LCP) influențează direct poziția site-ului în rezultatele căutării și rata de conversie. Standardul de facto pentru grafica web a devenit reprezentat de formatele moderne WebP și de formatul și mai eficient AVIF. Acestea asigură o compresie a imaginilor cu 30–50% mai mare decât clasicul JPEG, păstrând o calitate vizuală identică.
Încercarea de a converti manual imaginile în formate noi înainte de încărcarea pe site este o cale fără ieșire pentru automatizare. Sistemul trebuie să facă acest lucru în mod autonom la nivelul serverului.
În acest articol, vom analiza detaliile tehnice ale formatelor moderne și vom configura o conversie și o livrare complet automate WebP/AVIF „din mers” prin intermediul serverului web Nginx.
Key Takeaways: Esențialul despre optimizarea graficii
AVIF este liderul tehnologic: Formatul AVIF comprimă fișierele mult mai eficient decât WebP, în special în degradeuri complexe și detalii fine, dar necesită ceva mai mult timp de procesare pentru codare.
Automatizarea rezolvă totul: Utilizarea Nginx împreună cu module de procesare sau utilitare CLI în fundal (
cwebp,avifenc) scutește complet managerii de conținut de munca de rutină.Livrare fără întreruperi (Fallback): Nu toate browserele vechi (sau sistemele de operare specifice) suportă AVIF. Serverul trebuie să poată verifica din mers antetele browserului
Acceptși să livreze AVIF celor care îl suportă, iar celorlalți să le returneze formatul standard WebP sau JPEG.
WebP vs. AVIF: Care este diferența în biți?
Pentru a înțelege de ce industria renunță la formatele clasice, să privim tehnologia de compresie. WebP se bazează pe algoritmii codec-ului video VP8, în timp ce AVIF folosește capacitățile moderne de compresie ale codec-ului AV1.
| Format fișier | Dimensiune medie (față de original) | Suport transparență (Canal Alfa) | Suport animație | Încărcare CPU la codare |
| JPEG | 100% (Etalon de bază) | Nu | Nu | Minimă |
| WebP | ~65–70% (compresie de 30%) | Da | Da | Scăzută |
| AVIF | ~40–50% (compresie de 50%) | Da | Da | Ridicată (necesită nuclee puternice) |
Arhitectura de livrare automată la nivel de Nginx
Cea mai elegantă și performantă metodă de implementare a formatelor WebP/AVIF este utilizarea Nginx ca un „proxy inteligent”. Nu vom obliga serverul să genereze imaginea în aceeași milisecundă în care a sosit utilizatorul (acest lucru ar crea o încărcare parazită uriașă pe CPU). Vom configura arhitectura astfel încât Nginx să verifice existența unei copii a fișierului pregătite în prealabil.
Pasul 1. Configurarea Nginx (Verificarea antetelor browserului)
Când browserul solicită o imagine, trimite antetul Accept, în care specifică formatele pe care le poate citi (de exemplu: image/avif,image/webp,*/*).
Deschideți fișierul de configurare al serverului web Nginx (în secțiunea http a fișierului /etc/nginx/nginx.conf):
map $http_accept $img_suffix {
default "";
"~*image/avif" ".avif";
"~*image/webp" ".webp";
}
Această mapare verifică: dacă browserul suportă AVIF, variabila $img_suffix va primi valoarea .avif. Dacă AVIF nu este suportat, dar există WebP — valoarea .webp.
Acum, în interiorul configurației hostului virtual (în blocul server), adăugați regulile de livrare inteligentă:
location ~* ^.+\.(png|jpg|jpeg)$ {
# Verificăm existența fișierului cu sufixul corespunzător
try_files $uri$img_suffix $uri =404;
# Adăugăm antetele corecte de stocare în cache
expires 30d;
add_header Cache-Control "public, no-transform";
add_header Vary Accept;
}
Cum funcționează: Utilizatorul solicită fișierul photo.jpg. Dacă browserul său suportă AVIF, Nginx verifică mai întâi prin directiva try_files dacă pe disc există fișierul photo.jpg.avif. Dacă îl găsește, îl livrează instantaneu, păstrând în bara de adrese numele vechi photo.jpg. Dacă fișierul nu există, livrează fișierul original photo.jpg.
Pasul 2. Automatizarea conversiei în fundal (Script prin Cron)
Acum trebuie să facem ca serverul să găsească automat imaginile noi încărcate de utilizatori (de exemplu, în directorul /var/www/uploads/) și să creeze pentru ele copii .webp și .avif în fundal.
Instalați utilitarele de optimizare în Ubuntu 24.04:
sudo apt update
sudo apt install webp libavif-bin findutils -y
Creați un script Bash de automatizare:
mkdir -p ~/scripts && nano ~/scripts/img_compress.sh
Lipiți următorul cod:
#!/bin/bash
TARGET_DIR="/var/www/my_site/uploads"
# 1. Găsim toate fișierele jpg/png care nu au copie WebP și le convertim
find "$TARGET_DIR" -type f \( -name "*.jpg" -o -name "*.jpeg" -o -name "*.png" \) | while read -r img; do
if [ ! -f "${img}.webp" ]; then
cwebp -q 82 "$img" -o "${img}.webp" > /dev/null 2>&1
fi
# 2. Găsim și creăm copii AVIF
if [ ! -f "${img}.avif" ]; then
# -q 65 — echilibru optim între calitate și dimensiune pentru avif
avifenc -q 65 "$img" "${img}.avif" > /dev/null 2>&1
fi
done
Faceți scriptul executabil:
chmod +x ~/scripts/img_compress.sh
Adăugați scriptul în planificatorul de sarcini cron pentru a fi executat, de exemplu, în fiecare oră:
crontab -e
Adăugați linia de rulare automată:
0 * * * * /bin/bash /root/scripts/img_compress.sh
Experiență personală
Cu ceva timp în urmă (acum aproximativ 10 ani), mi s-a încredințat un site construit pe WordPress care se încărca greu. Am efectuat o verificare și, pe lângă pluginurile care îngreunau sistemul, am observat că imaginile de pe site (care erau FOARTE numeroase) erau în format JPEG. Acest lucru îngreuna site-ul, iar timpul de încărcare era uriaș — după standardele actuale, inacceptabil, între 5 și 7 secunde. Am analizat toate imaginile de pe site și le-am convertit manual în format WebP, reducând considerabil timpul de încărcare al site-ului și sarcina pe server. De aceea, dacă doriți ca site-ul dumneavoastră să se încarce rapid și să fie în topul motoarelor de căutare, optimizați neapărat imaginile.
FAQ: Pe scurt despre ce este mai important
Procesul de conversie încarcă puternic serverul?
Utilitarul
cwebpfuncționează foarte rapid și aproape insesizabil pentru sistem. Codarea prinavifenceste o operațiune intensivă, care poate încărca un nucleu de procesor la 100% în momentul compresiei unei imagini mari. De aceea rulați scriptul în fundal prin cron (sau în orele cu trafic minim), în loc să generați fișierele din mers la fiecare cerere.Se pot folosi module terțe Nginx precum ngx_pagespeed?
Se pot folosi, dar adesea funcționează instabil, necesită compilarea complexă a serverului web din surse și creează o încărcare dinamică imprevizibilă pe memoria RAM. Generarea copiilor statice în fundal prin scripturi Bash este cea mai sigură și performantă metodă din punct de vedere arhitectural.
Concluzie
Implementarea automată a formatelor moderne WebP și AVIF la nivelul serverului permite reducerea drastică a dimensiunii paginilor site-ului (adesea volumul total al traficului media scade de 2–3 ori). Acest lucru accelerează încărcarea site-ului pe dispozitive mobile în rețele 3G/4G, scade rata de părăsire (Bounce Rate) și economisește lățimea de bandă a serverului.
Deoarece utilitarele de codare grafică (în special avifenc) necesită o putere de calcul ridicată și creează o încărcare pe disc în timpul scanării directoarelor, pentru o funcționare stabilă a backend-ului este necesară o platformă hardware performantă.
Dacă optimizați magazine online, portaluri de știri cu multe imagini sau platforme B2B, analizați serviciile noastre NVME VPS / Dedicated Server.
Autorul articolului — Anatolie Cohaniuc